<html>
    <head>
        <title>添加交互</title>
    </head>
    <body>
        <script>
            // 添加交互性
                    /*
                        屏幕上的某些内容会响应用户输入而更新。

                        "状态"的概念：
                            在React中，"随时间变化的数据"被称为"状态"。你可以向任何组件添加状态，并根据需要更新它。
                            （在本章中，你将学习符合编写组件来处理交互、更新它们的状态以及随时间显示不同的输出。）
                    */ 


                    // 一、响应事件
                            /*
                                React允许你想JSX添加事件处理程序。
                                事件处理程序就是你自己写的函数，将被触发以响应用户交互。（单击、悬停、聚焦等）
                            */
                            
                            /*
                                像<button>这样的内置组件，只支持像onClick这样的"浏览器内置事件"。
                                但是，你也可以创建自己的组件，并为它们的事件处理程序提供你喜欢的任何特定于应用的名称。
                            */
                                 // eg:  在一个组件js文件中:

                                        function Button({onClick,children}){
                                            return (
                                                <Button onClick={onClick}>
                                                    {children}
                                                </Button>
                                            );
                                        }

                                        function Toolbar({onPlayMovie,onUploadImage}){
                                            return(
                                                <div>
                                                      <Button onClick={onPlayMove}>
                                                           Play Movie
                                                      </Button>
                                                      <Button onClick={onUploadImage}>
                                                           Upload Image
                                                      </Button>
                                                </div>
                                            );
                                        }

                                        // 默认导出app组件
                                        export default function App(){
                                            return (
                                                <Toolbar 
                                                        onPlayMoive={()=>alert('Playing')}
                                                        onUploadImage={()=>alert('onUploadImage')}  
                                                />
                                            );
                                        }


                    // 二、 状态： 组件的内存
                            /*
                                    作为交互的结果，组件通常需要给改屏幕上的内容。在表单中输入应该更新输入字段，单击轮播的"下一个"应该更改显示的图片、单击"购买"将产品放入购物车。
                                    这些情况下，组件需要"记住"的东西有： 当前的输入值、当前图片、购物车。。。。
                                    在React中，这种特定于组件的内存，称为"状态"。
                                    React中的状态,类似于Vue中的data，但是它是私有的,不能想Vue那样直接修改，需要使用React提供的"状态设置函数"来修改。


                                    你可以使用userState钩子将状态添加到组件。（"钩子"是让你的组件使用React功能的"特殊函数"（状态，是这些功能之一））
                                
                                    useState钩子允许你声明一个状态变量。
                                    它采用初始状态返回一对值： ① "当前状态" 和 ②用于更改它的"状态设置函数"
                            */
                                    // eg:  
                                        const [index,setIndex] =useState(0);
                                        const [showMore,setShowMore] =useState(false);

                                    // eg:  以下是图片库如何在点击时使用和更新状态：


                    // 三、渲染和提交
                            /*
                                    在你的组件显示在屏幕上之前，它们必须由React渲染。
                                    了解此步骤将帮助你思考代码的执行方式并解释其行为。


                                    想象一下，你的组件时厨房里的初始，用石材烹制美味佳肴。在这个场景下，React是一个服务员，负责接收客户请求并为他们当来订单。
                                    这个"请求" 和 "提供UI"的过程分为三步：
                                        ①、触发渲染（用户点单，然后服务员将菜单送给厨房）
                                        ②、渲染组件(厨师按照菜单烹饪菜肴）
                                        ③、提交给DOM (将菜肴放在餐桌上)
                            */
                                    
                    // 四、状态快照
                            /*
                                与常规JavaScript变量不同，React状态的行为更像是"快照"。
                                设置它不会更改你已有的状态变量，而是触发重新渲染。这让人感到惊讶。
                            */
                                        console.log(count); // 0
                                        setCount(count+1);  //  触发状态为1的重新渲染
                                        console.log(count); // 结果仍然为 0


                    // 五、把一系列状态(state)更新添加到队列


                    // 六、更新状态中的对象

                    
                    // 七、更新状态中的数组
        </script>
    </body>
</html>